<template>
    <div class="inputDom">
        <!-- 这里可以添加动态 class 
        根据当前输入的合法性, 及时修改类名 -->
        <!-- <input :class="isValid?'':'error'" :type="type" :placeholder="placeholder" v-model="val"/> -->
        <!-- vue 提供了一种动态 class 方便管理的写法, 写成对象形式 
        对象当中以 key:value 的形式定义 class类名: 是否需要显示这个类名的布尔值-->
        <input 
            :class="{
                error: !isValid
            }" 
            :type="type" 
            :placeholder="placeholder" 
            v-model="val"
            @blur="handleBlur"
        />
    </div>
</template>

<script>
    export default {
        props: ['placeholder', 'type', 'rule', 'err_msg'],
        data() {
            return {
                val: '',
                isValid: true
            }
        },
        watch: {
            val() {
                // 判断为空就返回
                if (!this.val) {
                    this.isValid = true;
                }else {
                    // 判断是否符合正则
                    if (this.rule.test(this.val)) {
                        console.log('符合要求');
                        this.isValid = true
                    }else {
                        console.log(this.err_msg);
                        this.isValid = false
                    }
                }
                
                // 向外传数据
                this.$emit('valChange', this.val)
            }
        },
        methods: {
            handleBlur() {
                // 这里是输入框失去焦点时触发的函数,
                // 需要验证一下当前的 isValid 是否还是 false
                // 如果还是, 就弹出一个框告诉用户出错了
                // 如果合法,则啥都不干
                console.log('失去焦点');
                if (!this.isValid) {
                    // alert(this.err_msg)
                    this.$toast.fail(this.err_msg)
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    .inputDom {
        padding-bottom: 20/360 * 100vw;
        input {
            width: 100%;
            outline: none;
            border: none;
            border-bottom: 1px solid #888;
            font-size: 18/360 * 100vw;
            line-height: 36/360 * 100vw;
        }
        .error {
            border-bottom: 1px solid red;
        }
    }
</style>